﻿/* -- Copyright © Microsoft Corporation. All rights reserved. */
.contenteditableTextarea
{
    border: 1px solid rgb(112, 112, 112);
    padding: 2px;
    width: 177px;
    height: 30px;
    word-wrap: break-word;
    overflow-y: scroll;
}

.contenteditableTextarea:focus
{
    border-color: rgb(33, 33, 33);
}

.contenteditableTextarea:hover
{
    border-color: rgb(38, 160, 218);
}

.contenteditableTextarea:active
{
    border-color: rgb(33, 33, 33);
}

.contenteditableTextarea:disabled
{
    border-color: rgb(188, 188, 188);
    background-color: rgb(230, 230, 230);
    color: rgb(122, 122, 122);
}

#spellCheckText
{
    height: 12em;
}

input[type="text"].differentTextinputColor
{
    border-color: rgba(255, 224, 100, 0.8);
    border-style: solid;
    background-color: rgba(255, 224, 100, 0.8);
}

input[type="text"].differentTextinputColor:hover
{
    border-color: rgba(255, 224, 100, 0.87);
    background-color: rgba(255, 224, 100, 0.87);
}

input[type="text"].differentTextinputColor:active, input[type="text"].differentTextinputColor:focus
{
    border-color: rgb(255, 224, 100);
    background-color: rgb(255, 224, 100);
}

/* pink email input stype with an envelope icon inside */
input[type="email"].differentEmailInputStyle
{
    background-color: rgba(242,242,242,1.0);
    background-image: url('../images/EmailIcon_Gray.svg');
    background-repeat: no-repeat;
    background-position: 7px 8px;
    border-color: rgba(212,212,212,1.0);
    border-style: solid;
    border-radius: 5px;
    color: rgba(0,0,0,0.6);
    border-width: 2px 0px 0px 2px;
    padding-left: 30px; /* add padding so that users can't type on top of the envelope icon */
    padding-right: 4px;
    width: 257px;    
    min-height: 28px;
}

input[type="email"].differentEmailInputStyle:hover
{
    background-color: rgba(250,250,250,1.0);
}

input[type="email"].differentEmailInputStyle:active, input[type="email"].differentEmailInputStyle:focus
{
    background-color: rgba(253,232,240,1.0);
    background-image: url('../images/EmailIcon_Pink.svg');
    border-color: rgba(239,73,134,1.0);
    color: rgba(0,0,0,0.8);
}

input[type="email"].differentEmailInputStyle:disabled
{
    background-image: url('../images/EmailIcon_Gray.svg');
    background-color: rgba(242,242,242,0.4);
    border-color: rgba(242,242,242,0.4);
    color: rgb(170,170,170);
}

/* style the clear button */
input[type="email"].differentEmailInputStyle::-ms-clear
{
    background-color: rgba(239,73,134,0.3);
    border-radius: 3px;
    width: 20px;
    height: 20px;
    color: white;
    margin: 0px 0px 0px 4px;
}

input[type="email"].differentEmailInputStyle::-ms-clear:hover
{
    background-color: rgba(239,73,134,0.5);
}

input[type="email"].differentEmailInputStyle::-ms-clear:active
{
    background-color: rgba(239,73,134,1.0);
    color: white;
}

input[type="email"].differentEmailInputStyle:disabled::-ms-clear
{
    display: none;
}

textarea.differentTextareaStyle
{
    background-color: black;
    background-image: radial-gradient(ellipse farthest-corner at center top, #494949 0%, black 100%);
    padding: 36px;
    border: none;
    color: rgba(255,255,255,0.8);
    font-family: Franklin Gothic Medium Cond, Arial, sans-serif;
    font-size: 18px;
    line-height: 36px;
    transform: perspective(658px) rotate3d(500, 0, 0, 57deg);   /* 3d transform on the whole text box */
    margin-top: -58px;
    height: auto;
}

textarea.differentTextareaStyle:hover
{
    background-color: black;
    background-image: radial-gradient(ellipse farthest-corner at center top, #5E5E5E 0%, black 100%);
    color: rgba(255,255,255,0.8);
}

textarea.differentTextareaStyle:active, textarea.differentTextareaStyle:focus
{
    background-color: black;
    background-image: radial-gradient(ellipse farthest-corner at center top, #494949 0%, black 100%);
    color: rgb(255,255,255);
}

textarea.differentTextareaStyle:disabled
{
    background-color: black;
    color: rgba(255,255,255,0.2);
}